<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>宿舍故事</title>
</head>

<body>
    <header>
        <img src="tp/logo.jpg" alt="宿舍网站Logo" class="logo">
        <nav>
            <a href="../index.html">首页</a>
            <a href="members.html">宿舍成员</a>
            <a href="life.html">宿舍生活</a>
            <a href="#">宿舍故事</a>
            <a href="about.html">关于我们</a>
        </nav>
    </header>

    <main>
        <!-- 宿舍日记 -->
         <section id="dorm - diaries"><!--<section> 标签有明确的语义，用于表示页面的章节。 -->
            <h2>宿舍日记</h2>
            <!-- 缪流惠的日记 -->
             <article class="diary"><!--<article> 标签强调内容的独立性和完整性。 -->
                <h3>缪流惠的日记</h3>
                <p>今天终于完成了项目，感觉整个人都轻松了。晚上和室友们一起打篮球，虽然输了比赛，但大家玩得很开心。</p>
            </article>
            <!-- 高姝容的日记 -->
            <article class="diary">
                <h3>高姝容的日记</h3>
                <p>今天去了一家新开的餐厅，味道不错，下次还要带大家一起去。晚上整理了一下最近拍的照片，发现了很多美好的瞬间。</p>
            </article>
            <!-- 李雯的日记 -->
            <article class="diary">
                <h3>李雯的日记</h3>
                <p>今天看了一部经典电影《肖申克的救赎》，感触很深。晚上和室友们讨论了电影的主题，大家各抒己见，很有意思。</p>
            </article>
            <!-- 秦妙燕的日记 -->
            <article class="diary">
                <h3>秦妙燕的日记</h3>
                <p>今天组织了一次骑行活动，大家骑到了郊外，呼吸新鲜空气，感觉非常放松。晚上回来一起做了手工，很有成就感。</p>
            </article>
        </section>

        <!-- 宿舍回忆 -->
        <section id="dorm - memories">
            <h2>宿舍回忆</h2>
            <img src="tp/sr.jpg" alt="生日庆祝照片" class="memory - img">
            <p>每次有室友生日，大家都会准备惊喜，一起庆祝。</p>
        </section>

        <!-- 宿舍未来 -->
        <section id="dorm - future">
            <h2>宿舍未来</h2>
            <p class="future - wish">希望宿舍成员在未来的日子里都能实现自己的梦想，保持联系，友谊长存。</p>
            <p class="future - wish">祝愿大家前程似锦，生活幸福，永远记得这段美好的宿舍时光。</p>
        </section>
    </main>

    <footer>
        <p>版权归本宿舍所有，20XX - 20XX</p>
        <p>邮箱：dorm@example.com</p>
    </footer>

    <script src="script.js"></script>
</body>

</html>